<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>0326v-for</title>
    <style>
        span{
            margin-left: 20px;
        }
        .btn{
            width: 400px;
            height: 200px;
            border:red solid 2px;
            outline: none;
            text-align: center;
        }
        .button-in{
            margin-top: 170px;
            margin-left: 10px;
            cursor: pointer;
            outline: none;
        }
        .button-in:hover{
            background:  #56a6f7;
        }
        .numbtn{
            background: #56a6f7;
            text-decoration: underline;
            color: white;
            border: #56a6f7 solid 2px;
        }
        .numbtn:hover{
            cursor:not-allowed;
        }
    </style>
</head>
<body>
    <div id="app">
        <h2>v-for指令（列表渲染指令)--高级使用</h2>
        <span>index是stu的索引</span><br>
        <span v-for="(stu,index) in stuArr" >{{index+1}}.{{stu}}</span>
        <hr>
        <p>v-for遍历对象</p>
        <span v-for="(info, index) in stuDetail" >{{info}}</span>
        <br>
        <span v-for="(info,key, index) in stuDetail" >
            {{index+1}}--{{key}}:{{info}}&nbsp;&nbsp; 
        </span>
        <hr>
        <p>v-for遍历整数</p>
        <span><button v-for="item in 3" >{{item}}</button></span>
        <hr>
        <span>简单分页效果</span>
        <div class="btn">
            <button class="button-in" @click="page('-')" v-show="pagebtn!=1">上一页</button>
            <button v-for="num in 5" :class="{numbtn : num == [pagebtn]}" class="button-in" @click="page(num)">
                -{{num}}-
                <!--通过与pagebtn比对，默认为1，点击哪一个按钮，pagebtn就重新复制为新的点击值，
                    然后在按钮num值与pagebtn相等时，为其添加class属性numbtn-->
            </button>
            <button class="button-in" @click="page('+')" v-show="pagebtn!=5">下一页</button>
        </div>
        <hr>
        <h2>数组更新</h2>
        <span>前端工程师投送地：</span><br>
        <span v-for="(place, index) in placeList" >{{place}}</span><br>
        &nbsp;&nbsp;&nbsp;
        <label for="">我更想要去的地方：</label>
        <input type="text" v-model="place">
        <button @click="aoligei">奥利给</button>
        <br>&nbsp;&nbsp;&nbsp;
        <label for="">删除最后一个我不想要去的地方</label>
        <button @click="aoligeibay">再见</button><br>
        &nbsp;&nbsp;&nbsp;<button @click="sortList">排序</button>
        <button @click="reverseList">倒序</button><br>
        <hr>
        <p>===============错误不跟新方法===============</p>
        <p>直接修改数组长度和利用索引值直接修改内容，视图无更新</p>
        <button @click="changeLen">修改长度</button>
        <button @click="changecontent">修改内容</button>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                pagebtn:1,
                placeList:[
                    '上海',
                    '杭州',
                    '广州',
                    '深圳',
                    '苏州',
                    '宁波'
                ],
                place:'',
               

                stuArr:[
                    'stu1',
                    'stu2',
                    'stu3',
                    'stu4',
                    'stu5',
                    'stu6',
                ],
                stuDetail:{
                    name:'jake',
                    class:'class1',
                    stuNo:'001',
                    age:'19',
                    gender:'male'

                }
            },
            computed: {
                
            },
            methods: {
                //模拟页面跳转
                page:function(num){
                    if (num =='-') {
                        this.pagebtn =this.pagebtn-1;
                    }else if (num=='+'){
                        this.pagebtn=this.pagebtn+1 ;
                    }else if(this.pagebtn!=num){
                        this.pagebtn=num;
                    }
                    //还可以在button中传这种值： @click="page(pagebtn--)"或者++
                },
                //向数组中添加新的数据
                aoligei:function(){
                    if(this.place!=''){
                        this.placeList.push(this.place);
                        this.place='';

                    }
                },
                //向数组中删除最后一条数据
                aoligeibay:function(){
                   this.placeList.pop();
                },
                //排序和倒序
                sortList:function(){
                    this.placeList.sort();
                },
                reverseList:function(){
                    this.placeList.reverse();
                },
                //修改长度
                changeLen:function(){
                    //this.placeList.length=5;
                    //this.placeList.splice(4,2);
                    this.placeList.splice(4);
                },
                changecontent:function(){
                    //this.placeList[2]="荥阳";
                    this.placeList.splice(2,1,'荥阳');
                }
            },
            
        })
    </script>
</body>
</html>